<template>
  <div class="login" :class="`theme-${theme}`">
    <div class="logo">
      <img class="logo-img" :src="logo" />
      <h1>Code Crazy</h1>
    </div>
    <a-form
      ref="form"
      class="login-form"
      :model="formState"
      name="basic"
      :wrapper-col="{ span: 24 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        name="username"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formState.username">
          <template #prefix>
            <icon-font type="icon-customer-fill" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
        name="password"
        :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <a-input-password v-model:value="formState.password">
          <template #prefix>
            <icon-font type="icon-lock-fill" />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item name="remember" :wrapper-col="{ offset: 0, span: 16 }">
        <a-checkbox
          v-model:checked="formState.remember"
          @change="handleRemember"
          >Remember me</a-checkbox
        >
      </a-form-item>

      <a-form-item>
        <a-space size="large">
          <a-button type="primary" @click="handleLogin()" :loading="subLoading"
            >Login</a-button
          >
          <!--          <a-button @click="resetFields()">Reset</a-button>-->
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { message } from "ant-design-vue";
import { login, userInfo } from "@/request/api/login/index.js";
import {
  useUserInfo,
  useToken,
  useMenu,
  useRoutesStore,
} from "@/store/index.js";
const router = useRouter();
const routes = useRoute();
const tokenStore = useToken();
const userInfoStore = useUserInfo();
const menuStore = useMenu();
const routesStore = useRoutesStore();
const subLoading = ref(false);
const form = ref(null);
const formState = ref({
  username: "admin",
  password: "123456",
  remember: true,
});
import logo from "@/assets/img/logo.svg";

const theme = localStorage.getItem("theme");

onMounted(() => {
  if (localStorage.getItem("username") && localStorage.getItem("password")) {
    formState.value.username = localStorage.getItem("username");
    formState.value.password = localStorage.getItem("password");
    formState.value.remember = true;
  } else {
    formState.value.remember = false;
  }
});

const handleLogin = async () => {
  try {
    subLoading.value = true;
    const response = await login({
      username: formState.value.username,
      password: formState.value.password,
    });
    if (response.code === 200) {
      tokenStore.token = response.data.accessToken;
      tokenStore.refreshToken = response.data.refreshToken;
      await getUserInfo(formState.value.username);
      await menuStore.arrToTree();
      await routesStore.handleRoutes();

      message.success("Login success!");
      subLoading.value = false;
      router.push({
        path: routes.query.redirect || "/",
      });
    } else {
      subLoading.value = false;
      message.error("Login failed!");
    }
  } catch (error) {
    subLoading.value = false;
    message.error("Login failed!");
  }
};

const getUserInfo = async (username) => {
  const response = await userInfo(username);
  if (response.code === 200) {
    userInfoStore.userInfo = response.data;
  }
};

// const resetFields = () => {
//   form.value.resetFields();
// };

const handleRemember = (checkedValue) => {
  formState.value.remember = checkedValue.target.checked;
  if (formState.value.remember) {
    localStorage.setItem("username", formState.value.username);
    localStorage.setItem("password", formState.value.password);
  } else {
    localStorage.removeItem("username");
    localStorage.removeItem("password");
  }
};

const onFinish = (values) => {
  console.log("Success:", values);
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
</script>

<style scoped lang="scss">
.theme-dark {
  background: linear-gradient(
    135deg,
    #272727,
    #4a4a4a,
    #6d6d6d,
    #909090,
    #b3b3b3,
    #d6d6d6,
    #f9f9f9
  );
}

.theme-light {
  background: linear-gradient(
    135deg,
    #001f3f,
    #0088a9,
    #00c9a7,
    #92d5c6,
    #ebf5ee
  );
}

.login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;

  .logo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .login-form {
    padding: 16px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.4);
  }
}
</style>
